<template>
  <el-main>
    <el-form :inline="true" style="float:left;" :model="form" class="demo-form-inline">
      <el-form-item label="角色姓名">
        <el-input size="mini" v-model="form.name" placeholder="请输入角色姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          size="mini"
          @cell-click="clickSupplier"
          @click="getRequest()"
          icon="el-icon-search"
        >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :header-cell-style="{background:'#FF8800',color:'#ffffff'}"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" width="100px"></el-table-column>
      <el-table-column prop="bz" label="权限"></el-table-column>
      <el-table-column prop="name" label="角色姓名"></el-table-column>
      <el-table-column prop="remarks" label="备注部分"></el-table-column>
      <el-table-column label="菜单设置">
        <template slot-scope="scope">
          <el-button @click="caidan(scope.row)" type="text" size="small">
            <i class="el-icon-s-tools"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-setting" @click="toup(scope.row)">修改</el-button>
          <el-button type="text" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加角色信息 -->
    <el-dialog
      append-to-body
      title="添加角色信息"
      :visible.sync="dialogFormVisible1"
      width="700px"
      class="dialog"
    >
      <el-form inline :model="Role">
        <el-card class="box-card">
          <div class="text item">
            <el-form-item label="角色名称：">
              <el-input size="mini" v-model="Role.name"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="本职名称：">
              <el-input size="mini" v-model="Role.bz"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="备注：">
              <el-input type="textarea" size="mini" v-model="Role.remarks"></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right;">
              <el-button type="success" size="mini" @click="addRole">添加</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>

    <!-- 修改角色的信息 -->
    <el-dialog
      append-to-body
      title="修改角色信息"
      :visible.sync="dialogFormVisible2"
      width="700px"
      class="dialog"
    >
      <el-form inline :model="Role">
        <el-card class="box-card">
          <div class="text item">
            <el-form-item label="角色名称：">
              <el-input size="mini" v-model="Role.name"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="本职名称：">
              <el-input size="mini" v-model="Role.bz"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="备注：">
              <el-input type="textarea" size="mini" v-model="Role.remarks"></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right;">
              <el-button type="success" size="mini" @click="upRole">修改</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>

    <!-- 角色列表 -->
    <el-dialog title="拥有菜单权限" :visible.sync="dialogTableVisible" @close="cleartree">
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[10, 20,30,40,50,60]"
        :default-checked-keys="defaultCheckedKeys"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible2: false,
      defaultCheckedKeys: [],
      data: [],
      form: {},
      dialogFormVisible1: false,
      Role: {},
      Role1: {}
    };
  },

  methods: {
    getCheckedKeys() {
      this.Role.menuIds = this.$refs.tree.getCheckedKeys();
      this.Role.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "post",
        url: this.requestUrl + "user/user/tRoleMenu/up",
        data: this.qs.stringify(this.Role)
      }).then(res => {
        console.log("权限修改状态", res.data.msg);
        if (res.data.code == 200) {
          this.dialogTableVisible = false;
        }
      });
    },
    clickSupplier() {},
    add() {
      this.dialogFormVisible1 = true;
    },
    addRole() {
      var $this = this;
      this.Role["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "user/user/role/addRole",
        params: $this.Role
      }).then(function(res) {
        console.log("返回添加成功的信息", res);
        $this.dialogFormVisible1 = false;
        $this.getUserList();
      });
    },
    upRole() {
      var $this = this;
      this.Role["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "user/user/role/update",
        params: $this.Role
      }).then(function(res) {
        console.log("返回修改成功的信息", res);
        $this.dialogFormVisible2 = false;
        $this.getUserList();
      });
    },
    del(row) {
      console.log("删除一行的数据是：", row);
      var $this = this;
      this.axios({
        method: "post",
        url: this.requestUrl + "user/user/role/delete",
        params: {
          id: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.getUserList();
      });
    },
    //做修改的方法
    toup(row) {
      console.log("修改一行的数据是：", row);
      this.dialogFormVisible2 = true;
      this.Role.id = row.id;
      this.Role.name = row.name;
      this.Role.bz = row.bz;
      this.Role.remarks = row.remarks;
    },
    getUserList() {
      var $this = this;
      $this
        .axios({
          method: "get",
          url: "http://localhost:9999/user/user/role/roleList",
          params: { access_token: localStorage.getItem("access_token") }
        })
        .then(res => {
          $this.tableData = res.data.obj;
        });
    },

    caidan(row) {
      this.dialogTableVisible = true;
      this.Role = JSON.parse(JSON.stringify(row));
      var id = row.id;
      console.log(id);
      this.axios({
        method: "get",
        url:
          "http://localhost:9999/user/user/menu/getRoleMenuById?access_token=" +
          localStorage.getItem("access_token"),
        params: { id: id }
      }).then(res => {
        console.log(res.data.obj);
        this.defaultCheckedKeys = res.data.obj[0].split(",");
        console.log(this.defaultCheckedKeys);
      });
    },
    cleartree() {
      this.$refs.tree.setCheckedKeys([]);
    }
  },

  mounted() {
    this.getUserList();
    this.axios({
      method: "get",
      url:
        "http://localhost:9999/user/user/menu/getRoleMenu?access_token=" +
        localStorage.getItem("access_token")
    }).then(res => {
      console.log("获取到的数据", res);
      this.data = res.data.obj;
      console.log("输出data", this.data);
    });
  }
};
</script>

<style>
</style>